<script setup>
import AuditDetailsNavi from '@/components/audit/AuditDetailsNavi.vue'
import AuditTitleCard from '@/components/audit/AuditTitleCard.vue'
import AuditDetailCardAttendance from '@/components/audit/AuditDetailCardAttendance.vue'
import AuditSteps from '@/components/audit/AuditSteps.vue'
import AuditDetailCommentCard from '@/components/audit/AuditDetailCommentCard.vue'
import { ref, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import {
  administrativeApplyApiInfo,
  attendanceApplyInfoApi,
  attendanceRuleApi,
  financialApplyApiInfo,
  personnelApplyApiInfo,
} from '@/api/attendance'

const data = ref(null)
const shengpiFlag = ref(false)
const op = ref(null)

const popup = ref(null)
const inputValue = ref('')
const titlePopup = ref('')
const rejectType = ref('')
const textareaValue = ref('') //文本域内容
// 打开弹窗
const openPopup = () => {
  popup.value.open()
}

// 同意
const handleConfirm = async () => {
  console.log('用户输入:', textareaValue.value, rejectType.value)
  if (rejectType.value === 1) {
    let params = {
      applyId: op.value.id,
      type: op.value.type,
      status: '驳回',
      remark: textareaValue.value,
    }
    let { code } = await attendanceRuleApi(params)
    if (code === 200) {
      uni.showToast({
        icon: 'success',
        title: '已驳回',
      })
      uni.navigateBack()
    }
  } else {
    // 同意
    let params = {
      applyId: op.value.id,
      type: op.value.type,
      status: '已处理',
      remark: textareaValue.value,
    }
    let { code } = await attendanceRuleApi(params)
    if (code === 200) {
      uni.showToast({
        icon: 'success',
        title: '已同意',
      })
      uni.navigateBack()
    }
  }

  popup.value.close()
}

// 拒绝
const handleReject = async (value) => {
  // let params = {
  //   applyId: op.value.id,
  //   type: op.value.type,
  //   status: '驳回',
  //   remark: value,
  // }
  // let { code } = await attendanceRuleApi(params)
  // if (code === 200) {
  //   uni.showToast({
  //     icon: 'success',
  //     title: '已驳回',
  //   })
  //   uni.navigateBack()
  // }
  // popup.value.close()
}
//更多
const open = ref(false)
const selectList = ref([
  {
    id: 205,
    label: '转审',
  },
  {
    id: 209,
    label: '加签',
  },
])
const changeSelect = (item, index) => {
  //转审加签事件
  console.log(item.id, item.label)
  if (item.label == '转审') {
    uni.navigateTo({
      url: '/pages/audit/turnRound/turnRound',
    })
  }
  if (item.label == '加签') {
    uni.navigateTo({
      url: '/pages/audit/countersign/countersign',
    })
  }
}
// 关闭弹窗
const handleClose = () => {
  popup.value.close()
}

onLoad(async (options) => {
  shengpiFlag.value = Boolean(options.shengpiFlag === 'true')
  op.value = options
  switch (op.value.type) {
    case '考勤':
      data.value = (await attendanceApplyInfoApi(op.value.id)).data
      break
    case '财务':
      data.value = (await financialApplyApiInfo(op.value.id)).data
      break
    case '人事':
      data.value = (await personnelApplyApiInfo(op.value.id)).data
      break
    case '行政':
      data.value = (await administrativeApplyApiInfo(op.value.id)).data
      break
    case '其他':
      break
  }
})

let scrollTop = ref(0)
let old = ref({
  scrollTop: 0,
})
const upper = (e) => {
  console.log(e)
}
const lower = (e) => {
  console.log(e)
}
const scroll = (e) => {
  // console.log(e)
  old.scrollTop = e.detail.scrollTop
}
const remark = ref(null)
const tongyiFn = () => {
  openPopup()
  titlePopup.value = '是否同意该申请?'
  rejectType.value = 0
  // uni.showModal({
  //   title: '审核',
  //   content: '是否同意该申请?', //模板中提示的内容
  //   confirmText: '同意',
  //   success: async (res) => {
  //     //点击复制内容的后调函数
  //     if (res.confirm) {
  //       let params = {
  //         applyId: op.value.id,
  //         type: op.value.type,
  //         status: '已处理',
  //         remark: remark.value,
  //       }
  //       let { code } = await attendanceRuleApi(params)
  //       if (code === 200) {
  //         uni.showToast({
  //           icon: 'success',
  //           title: '已同意',
  //         })
  //         uni.navigateBack()
  //       }
  //     } else if (res.cancel) {
  //       uni.showToast({
  //         //提示
  //         title: '取消',
  //         icon: 'none',
  //       })
  //     }
  //   },
  // })
}
const jujueFn = () => {
  openPopup()
  titlePopup.value = '是否驳回该申请'
  rejectType.value = 1
  // uni.showModal({
  //   title: '审核',
  //   content: '是否驳回该申请', //模板中提示的内容
  //   confirmText: '驳回',
  //   confirmColor: 'red',
  //   success: async (res) => {
  //     //点击复制内容的后调函数
  //     if (res.confirm) {
  //       let params = {
  //         applyId: op.value.id,
  //         type: op.value.type,
  //         status: '驳回',
  //       }
  //       let { code } = await attendanceRuleApi(params)
  //       if (code === 200) {
  //         uni.showToast({
  //           icon: 'success',
  //           title: '已驳回',
  //         })
  //         uni.navigateBack()
  //       }
  //     } else if (res.cancel) {
  //       uni.showToast({
  //         //提示
  //         title: '取消',
  //         icon: 'none',
  //       })
  //     }
  //   },
  // })
}
</script>

<template>
  <AuditDetailsNavi />
  <view class="titleCard">
    <AuditTitleCard v-if="data" :data="data" />
  </view>
  <scroll-view
    :scroll-top="scrollTop"
    :style="`height: ${
      shengpiFlag
        ? 'calc(100vh - 232rpx - 64rpx - 96rpx - 72rpx);'
        : 'calc(100vh - 232rpx - 64rpx - 72rpx);'
    }`"
    class="scroll-Y"
    scroll-y="true"
    @scroll="scroll"
    @scrolltolower="lower"
    @scrolltoupper="upper"
  >
    <view>
      <!--      审批详情-考勤-->
      <AuditDetailCardAttendance v-if="data" :data="data" />
      <!--      审批流程-->
      <AuditSteps v-if="data" :data="data" />
      <!--      全文评论-->
      <!--      <AuditDetailCommentCard />-->
      <!--      <text-->
      <!--        style="-->
      <!--          color: #86909c;-->
      <!--          font-size: 28rpx;-->
      <!--          font-style: normal;-->
      <!--          font-weight: 400;-->
      <!--          line-height: 39.2rpx;-->
      <!--        "-->
      <!--      >-->
      <!--        编号：SP202412160002-->
      <!--      </text>-->
      <!--      <image src="@/static/icon/auditDetailsSVG/copy.svg" style="width: 23.3rpx; height: 23.3rpx" />-->
    </view>
  </scroll-view>
  <!--    更多-->
  <liy-select
    :list="selectList"
    :open="open"
    @close="open = false"
    @change="changeSelect"
    titleKey="label"
    subtitleKey="address"
  ></liy-select>
  <!--  <view class="remark">-->
  <!--    <input type="text" v-model="remark">-->
  <!--  </view>-->
  <!--      拒绝同意-->
  <!-- <view v-if="shengpiFlag" class="btn-box">
	<button class="more" @tap="open = true">更多</button>
    <button class="no" @tap="jujueFn">拒绝</button>
    <button class="yes" @tap="tongyiFn">同意</button>
  </view> -->

  <view v-if="shengpiFlag" class="btn-box">
    <button class="no" @tap="jujueFn">拒绝</button>
    <button class="yes" @tap="tongyiFn">同意</button>
  </view>

  <!--  <uni-popup ref="popup" type="dialog">-->
  <!--    <uni-popup-dialog-->
  <!--      mode="input"-->
  <!--      :title="titlePopup"-->
  <!--      placeholder="请输入备注"-->
  <!--      :before-close="true"-->
  <!--      @confirm="handleConfirm"-->
  <!--      @close="handleClose"-->
  <!--    >-->
  <!--      <template v-slot:footer>-->
  <!--        <view class="popup-footer">-->
  <!--          <button class="cancel-btn" @click="handleReject">拒绝</button>-->
  <!--          <button class="confirm-btn" @click="handleConfirm">同意</button>-->
  <!--        </view>-->
  <!--      </template>-->
  <!--    </uni-popup-dialog>-->
  <!--  </uni-popup>-->

  <uni-popup ref="popup" type="dialog" @click.stop>
    <uni-popup-dialog
      :title="titlePopup"
      :before-close="true"
      @confirm="handleConfirm"
      @close="handleClose"
    >
      <!-- 自定义内容区域，替换默认的input -->
      <textarea
        class="custom-textarea"
        v-model="textareaValue"
        placeholder="请输入审批意见"
        auto-height
        @click.stop
      ></textarea>
    </uni-popup-dialog>
  </uni-popup>
</template>

<style lang="scss" scoped>
@import '@/static/style/index.scss';

body {
  background-color: $uni-bai;
  overflow: hidden;
}

.titleCard {
  width: 100%;
  overflow: hidden;
  background: linear-gradient(#e79d46, #f7f8fa);
}

.scroll-Y {
  background: #f7f8fa;
  padding: 32rpx;
}

.btn-box {
  background-color: #fff;
  height: 96rpx;
  @include flex(center, space-between);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;

  button {
    height: 72rpx;

    &:after {
      border: none !important;
    }
  }
  .more {
    width: 31%;
    padding: 15rpx 32rpx;
    @include flex(center, center);
    border-radius: 8rpx;
    border: 2rpx solid #f53f3f;
    color: #fff;
    background: #165dff;
  }
  .no {
    width: 42%;
    padding: 15rpx 32rpx;
    @include flex(center, center);
    border-radius: 8rpx;
    border: 2rpx solid #f53f3f;
    color: #f53f3f;
    background: #fff;
  }

  .yes {
    width: 42%;
    @include flex(center, center);
    padding: 15rpx 32rpx;
    border-radius: 8rpx;
    border: 2rpx solid #165dff;
    background: #165dff;
    color: #fff;
  }
}
/* 隐藏搜索框 */
:deep(.liy-select-fixed .liy-search-warp .liy-search-input[data-v-b5444149]) {
  display: none;
}
/* 隐藏加载loading */
:deep(.liy-loading[data-v-b5444149]) {
  display: none;
}
// 选项文字居中
:deep(.liy-select-fixed .liy-search-warp .liy-search-list .liy-search-li[data-v-b5444149]) {
  text-align: center;
  position: relative;
}
//选项栏宽度100%
:deep(
  .liy-select-fixed
    .liy-search-warp
    .liy-search-list
    .liy-search-li
    .liy-search-left[data-v-b5444149]
) {
  width: 100%;
}
// 选项栏文字大小
:deep(
  .liy-select-fixed
    .liy-search-warp
    .liy-search-list
    .liy-search-li
    .liy-search-left
    .liy-search-title[data-v-b5444149]
) {
  font-size: 55rpx;
  line-height: 85rpx;
}
//选项栏高度调整
:deep(.liy-search-li[data-v-b5444149]:nth-child(1)) {
  margin-top: 120rpx;
  border-top: 0.03125rem solid #f7f7f7;
}
//右侧选中图标隐藏
:deep(
  .liy-select-fixed
    .liy-search-warp
    .liy-search-list
    .liy-search-li
    .liy-search-icon
    .lsi-icon[data-v-b5444149]
) {
  // display: none;
}
//右侧选中图标位置调整
:deep(.lsi-icon) {
  position: absolute;
  right: 26rpx;
  bottom: 34rpx;
}
//右侧选中图标大小调整
:deep(
  .liy-select-fixed
    .liy-search-warp
    .liy-search-list
    .liy-search-li
    .liy-search-icon
    .lsi-icon[data-v-b5444149]
) {
  width: 60rpx;
}
/* 隐藏滚动条并禁止滚动 */
:deep(.uni-scroll-view) {
  // overflow: hidden !important;
}
//选项栏字居中
:deep(.liy-search-left) {
  height: 85rpx;
}
.custom-textarea {
  width: 100%;
  min-height: 200rpx;
  padding: 20rpx;
  border: 2rpx solid #eee;
}
:deep(.uni-popup__error) {
  color: #333;
}
</style>
